<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>团购网</title>
    <link rel="stylesheet" href="../tuangouw/css/index.css">
</head>

<body>
    <!-- 头部 -->
    <header>
        <div class="h_top">
            <!-- logo -->
            <img src="../tuangouw/images/index/LOGO.png" alt="">
            <!-- 搜索框 -->
            <div class="inp">
                <input type="text" placeholder="请输入商品名称">
            </div>
            <!-- 地区 -->
            <div class="sel">
                <select>
                    <option value="">广州市</option>
                    <option value="">上海市</option>
                    <option value="">北京市</option>
            </select>
                <!-- 三角形 -->
                <i></i>
            </div>
        </div>
        <!-- 轮播图 -->
        <div class="h_bt">
            <ul>
                <li><img src="../tuangouw/images/index/图层 1.png" alt=""></li>
                <li><img src="../tuangouw/images/index/图层 1.png" alt=""></li>
                <li><img src="../tuangouw/images/index/图层 1.png" alt=""></li>
            </ul>
            <!-- 轮播图进度条 -->
            <div class="bar">
                <div></div>
            </div>
        </div>
    </header>
    <!-- 主要内容 -->
    <main>
        <!-- 团购导航栏 -->
        <div class="tuan">
            <span><img src="../tuangouw/images/index/团购.png"> 优惠团购</span>

            <span>更多 <img src="../tuangouw/images/index/形状4副本.png" alt=""></span>
        </div>
        <!-- 四个盒子 -->
        <div class="hezi">
            <ul>
                <li>
                    <a href="#"><img src="../tuangouw/images/index/图层5.png" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="../tuangouw/images/index/图层6.png" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="../tuangouw/images/index/图层7.png" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="../tuangouw/images/index/图层8.png" alt=""></a>
                </li>
            </ul>
        </div>
        <!-- 猜你喜欢 -->
        <div class="cnxh">
            <span><img src="../tuangouw/images/index/形状5.png"> 猜你喜欢</span>

            <span>更多 <img src="../tuangouw/images/index/形状4副本.png" alt=""></span>
        </div>
        <!-- 商品 -->
        <div class="xiaochi">
            <div class="zuo">
                <img src="../tuangouw/images/index/图层3.png" alt="">
                <div class="txt">
                    <p>万岁寿司（正佳店）<i>>100m</i></p>
                    <p>[100店通用] 双人套餐</p>
                    <p>￥88.00<i>已售1000</i></p>
                </div>
            </div>
            <div class="zuo">
                <img src="../tuangouw/images/index/图层4.png" alt="">
                <div class="txt">
                    <p>周黑鸭（正佳店）<i>>100m</i></p>
                    <p>[100店通用] 双人套餐</p>
                    <p>￥88.00<i>已售1000</i></p>
                </div>
            </div>
            <div class="zuo">
                <img src="../tuangouw/images/index/图层4.png" alt="">
                <div class="txt">
                    <p>周黑鸭（正佳店）<i>>100m</i></p>
                    <p>[100店通用] 双人套餐</p>
                    <p>￥88.00<i>已售1000</i></p>
                </div>
            </div>
            <div class="zuo">
                <img src="../tuangouw/images/index/图层4.png" alt="">
                <div class="txt">
                    <p>周黑鸭（正佳店）<i>>100m</i></p>
                    <p>[100店通用] 双人套餐</p>
                    <p>￥88.00<i>已售1000</i></p>
                </div>
            </div>
        </div>
    </main>
    <!-- 底部导航栏 -->
    <nav>
        <div class="nav_di">
            <ul>
                <li>
                    <a href="../tuangouw/index.html"><img src="../tuangouw/images/index/首页.png" alt=""></a>
                    &nbsp;首页
                </li>
                <li>
                    <a href="../tuangouw/分类.html"><img src="../tuangouw/images/index/分类4.png" alt=""></a>
                    &nbsp;分类
                </li>
                <li>
                    <a href="../tuangouw/发现.html"><img src="../tuangouw/images/index/形状7副本.png" alt=""></a>
                    &nbsp;发现
                </li>
                <li>
                    <a href="../tuangouw/我的.html"><img src="../tuangouw/images/index/我的.png" alt=""></a>
                    &nbsp;我的
                </li>
            </ul>
        </div>
    </nav>
</body>

</html>